﻿@model ProductModel

@using Telerik.Web.Mvc.UI;

@if (Model.Id > 0)
{
    <div class="alert alert-info">
        <ul>
			<li>@T("Admin.Catalog.Products.AssociatedProducts.Note1")</li>
            <li>@T("Admin.Catalog.Products.AssociatedProducts.Note2")</li>       
        </ul>
    </div>

	<div>
		@(Html.Telerik().Grid<ProductModel.AssociatedProductModel>()
				.Name("associatedproducts-grid")
				.DataKeys(keys =>
				{
					keys.Add(x => x.Id);
				})
				.DataBinding(dataBinding =>
				{
					dataBinding.Ajax()
						.Select("AssociatedProductList", "Product", new { productId = Model.Id })
						.Update("AssociatedProductUpdate", "Product")
						.Delete("AssociatedProductDelete", "Product");
				})
				.Columns(columns =>
				{
					columns.Bound(x => x.ProductName)
						.ReadOnly()
						.Width("40%")
						.ClientTemplate(@Html.LabeledProductName("Id", "ProductName"));
					columns.Bound(x => x.Sku)
						.Width("20%")
						.ReadOnly();
					columns.Bound(x => x.Published)
						.ReadOnly()
						.Width("10%")
						.ClientTemplate(@Html.SymbolForBool("Published"))
						.Centered();
					columns.Bound(x => x.DisplayOrder)
						.Width("10%")
						.Centered();
					columns.Command(commands =>
					{
						commands.Edit().Localize(T);
						commands.Delete().Localize(T);
					})
					.HtmlAttributes(new { align = "right" })
					.Width("20%");
				})
				.ToolBar(commands => commands.Template(GridCommands))
				.EnableCustomBinding(true))
	</div>

}
else
{
    <p class="text-muted">
		@T("Admin.Catalog.Products.AssociatedProducts.SaveBeforeEdit")
	</p>	
}

@helper GridCommands(Grid<ProductModel.AssociatedProductModel> grid)
{
	@(Html.SmartStore().EntityPicker()
		.IconCssClass("fa fa-plus")
		.DisableGroupedProducts(true)
		.HtmlAttribute("class", "t-button t-button-primary")
		.DialogTitle(T("Admin.Catalog.Products.AssociatedProducts.AddNew").Text.EncodeJsString('\'', false))
		.Caption(T("Admin.Catalog.Products.AssociatedProducts.AddNew").Text.EncodeJsString('\'', false))
		.OnSelectionCompleted("AssociatedProducts_Selected"))
}

<script>
	function AssociatedProducts_Selected(ids) {
		$({}).doAjax({
			type: 'POST',
			url: '@Url.Action("AssociatedProductAdd")',
			data: { "productId": @Model.Id, "selectedProductIds": ids },
			callbackSuccess: function () {
				$('#associatedproducts-grid').data('tGrid').ajaxRequest();
			}
		});
		return true;
	}
</script>